<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-13 19:24:36
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-18 13:34:42
 * @Description: 
-->
<template>
  <div class="content">
    <el-card shadow="hover">
      <template #header>
        <span>公告列表</span>
      </template>

      <!-- table -->
      <el-table
        :data="noticeList"
        stripe
        highlight-current-row
        style="width: 100%"
        @row-click="toDetail"
      >
        <el-table-column prop="id" label="id" width="40" />
        <el-table-column prop="title" label="公告标题" />
        <el-table-column prop="create_time" label="发布时间" />
        <el-table-column prop="update_time" label="最近更新时间" />
        <el-table-column label="操作" width="290">
          <template #default="scope">
            <el-button
              @click.stop="handleRemove(scope.row, scope.$index)"
              type="danger"
              icon="Delete"
              >删除</el-button
            >
            <el-button
              @click.stop="handleEdit(scope.row.id)"
              type="primary"
              icon="Edit"
              >编辑</el-button
            >
            <el-button type="success" icon="CollectionTag">标记</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { notice } from "@/api";
import { useRouter } from "vue-router";

const router = useRouter();

let noticeList = ref((await notice.list()).data);

/**
 * @description: 跳转详情页
 * @return {*}
 * @param {*} row 行数据
 */
const toDetail = (row) => {
  router.push(`/notice/detail/${row.id}`);
};

/**
 * @description: 删除
 * @return {*}
 * @param {*} row 行数据
 * @param {*} index 索引
 */
const handleRemove = (row, index) => {
  ElMessageBox.confirm(`您是否确认删除 ${row.title} ?`, "⚠警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await notice.remove({ id: row.id });
      ElMessage({
        type: res.status ? "success" : "error",
        message: res.msg,
      });
      noticeList.value.splice(index, 1);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

/**
 * @description: 跳转编辑页
 * @return {*}
 * @param {*} id 公告id
 */
const handleEdit = (id) => {
  router.push(`/notice/edit/${id}`);
};
</script>

<style lang='less' scoped>
</style>

